<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.title"
        placeholder="方案标题"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-select v-model="listQuery.status" placeholder="审核状态" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in statusOptions" :key="item.key" :label="item.display_name" :value="item.key" />
      </el-select>
      <el-select v-model="listQuery.type" placeholder="方案类型" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in typeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="方案标题" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleView(row)">{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="方案类型" width="100px" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.type | typeFilter">
            {{ row.type | typeNameFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="AI专家" width="120px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.expert_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="赛事数量" width="100px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.match_count }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" class-name="status-col" width="100px">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">
            {{ row.status | statusNameFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="150px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.created_at | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleView(row)">
            查看详情
          </el-button>
          <el-button v-if="row.status === 'pending'" type="success" size="mini" @click="handleApprove(row)">
            审核通过
          </el-button>
          <el-button v-if="row.status === 'pending'" type="danger" size="mini" @click="handleReject(row)">
            拒绝
          </el-button>
          <el-button v-if="row.status === 'approved'" type="warning" size="mini" @click="handlePublish(row)">
            发布
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <!-- 方案详情对话框 -->
    <el-dialog title="方案详情" :visible.sync="dialogFormVisible" width="80%">
      <div v-if="currentScheme">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <div slot="header" class="clearfix">
                <span>基本信息</span>
              </div>
              <el-form label-width="100px">
                <el-form-item label="方案标题:">
                  <span>{{ currentScheme.title }}</span>
                </el-form-item>
                <el-form-item label="方案类型:">
                  <el-tag :type="currentScheme.type | typeFilter">
                    {{ currentScheme.type | typeNameFilter }}
                  </el-tag>
                </el-form-item>
                <el-form-item label="AI专家:">
                  <span>{{ currentScheme.expert_name }}</span>
                </el-form-item>
                <el-form-item label="创建时间:">
                  <span>{{ currentScheme.created_at | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
                </el-form-item>
                <el-form-item label="审核状态:">
                  <el-tag :type="currentScheme.status | statusFilter">
                    {{ currentScheme.status | statusNameFilter }}
                  </el-tag>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div slot="header" class="clearfix">
                <span>方案内容</span>
              </div>
              <div v-html="currentScheme.content" style="max-height: 300px; overflow-y: auto;"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <el-card>
              <div slot="header" class="clearfix">
                <span>包含赛事</span>
              </div>
              <el-table :data="currentScheme.matches" border>
                <el-table-column prop="league" label="联赛" width="120" />
                <el-table-column prop="home_team" label="主队" width="120" />
                <el-table-column prop="away_team" label="客队" width="120" />
                <el-table-column prop="match_time" label="比赛时间" width="150">
                  <template slot-scope="{row}">
                    <span>{{ row.match_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="prediction" label="预测结果" width="120" />
                <el-table-column prop="odds" label="赔率" width="100" />
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          关闭
        </el-button>
        <el-button v-if="currentScheme && currentScheme.status === 'pending'" type="success" @click="handleApprove(currentScheme)">
          审核通过
        </el-button>
        <el-button v-if="currentScheme && currentScheme.status === 'pending'" type="danger" @click="handleReject(currentScheme)">
          拒绝
        </el-button>
        <el-button v-if="currentScheme && currentScheme.status === 'approved'" type="warning" @click="handlePublish(currentScheme)">
          发布
        </el-button>
      </div>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog title="方案审核" :visible.sync="auditDialogVisible">
      <el-form ref="auditForm" :model="auditForm" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="审核结果" prop="result">
          <el-radio-group v-model="auditForm.result">
            <el-radio label="approved">通过</el-radio>
            <el-radio label="rejected">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="comment">
          <el-input v-model="auditForm.comment" type="textarea" :rows="4" placeholder="请输入审核意见" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditDialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitAudit">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchAuditList, auditScheme, publishScheme, getSchemeDetail } from '@/api/aiScheme'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

const statusOptions = [
  { key: 'pending', display_name: '待审核' },
  { key: 'approved', display_name: '已通过' },
  { key: 'rejected', display_name: '已拒绝' },
  { key: 'published', display_name: '已发布' }
]

const typeOptions = [
  { key: 'single', display_name: '单关' },
  { key: 'double', display_name: '二串1' },
  { key: 'triple', display_name: '三串1' }
]

export default {
  name: 'AuditList',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        pending: 'info',
        approved: 'success',
        rejected: 'danger',
        published: 'success'
      }
      return statusMap[status]
    },
    statusNameFilter(status) {
      const statusMap = {
        pending: '待审核',
        approved: '已通过',
        rejected: '已拒绝',
        published: '已发布'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      const typeMap = {
        single: 'primary',
        double: 'success',
        triple: 'warning'
      }
      return typeMap[type]
    },
    typeNameFilter(type) {
      const typeMap = {
        single: '单关',
        double: '二串1',
        triple: '三串1'
      }
      return typeMap[type]
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        title: undefined,
        status: undefined,
        type: undefined
      },
      statusOptions,
      typeOptions,
      dialogFormVisible: false,
      currentScheme: null,
      auditDialogVisible: false,
      auditForm: {
        scheme_id: '',
        result: 'approved',
        comment: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchAuditList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleView(row) {
      getSchemeDetail(row.id).then(response => {
        this.currentScheme = response.data
        this.dialogFormVisible = true
      })
    },
    handleApprove(row) {
      this.auditForm.scheme_id = row.id
      this.auditForm.result = 'approved'
      this.auditDialogVisible = true
    },
    handleReject(row) {
      this.auditForm.scheme_id = row.id
      this.auditForm.result = 'rejected'
      this.auditDialogVisible = true
    },
    handlePublish(row) {
      this.$confirm('确定要发布这个方案吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        publishScheme(row.id).then(() => {
          this.getList()
          this.$notify({
            title: '成功',
            message: '发布成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    submitAudit() {
      auditScheme(this.auditForm).then(() => {
        this.auditDialogVisible = false
        this.getList()
        this.$notify({
          title: '成功',
          message: '审核完成',
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>
